<template>
  <div class="board-comment">
    <!-- Loading State -->
    <div v-if="loading" class="board-comment__loading">
      加载中...
    </div>

    <!-- Comment Publish Section -->
    <PubItem :user="user" :note="commentModel.note" @update:note="commentModel.note = $event" @submit="submit" />

    <!-- Comment List Section -->
    <TreeItem v-if="dataList.length > 0" :key="dataList.length" :datas="dataList" />

    <!-- Empty State -->
    <div class="board-comment__empty" v-else>
      暂无评论
    </div>

    <!-- Comment Statistics -->
    <div class="board-comment__stats" v-if="dataList.length > 0">
      共 {{ dataList.length }} 条评论
    </div>
  </div>
</template>

<script>
import PubItem from './PubItem.vue';
import TreeItem from './TreeItem';

export default {
  name: 'BoardComment',
  components: {
    PubItem,
    TreeItem
  },
  props: {
    resource_id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      user: null,
      dataList: [], // 初始化为空数组
      loading: false,
      commentModel: this.createModel()
    }
  },
  watch: {
    dataList: {
      handler() {
        // 强制TreeItem重新渲染
        this.$forceUpdate();
      },
      deep: true
    }
  },
  created() {
    this.user = sa.$sys.getCurUser();
    this.loadComments();
  },

  methods: {
    createModel() {
      return {
        resourceId: this.resource_id,
        note: null,
        pid: null,
        type: '1'
      }
    },

    loadComments() {
      this.loading = true;
      try {
        sa.ajax('/comments/getByResourceId', {
          resourceId: this.resource_id
        }, function (res) {
          if (res.code === 200) {
            this.dataList = res.data || [];
          } else {
            sa.msg(res.msg);
          }
        }.bind(this), {
          type: "get"
        });
      } catch (error) {
        sa.msg(error.message || '网络请求失败');
      } finally {
        this.loading = false;
      }
    },

    submit() {
      try {
        sa.checkNull(this.commentModel.note, '请输入内容！');
        sa.ajax('/comments/comment',
          sa.removeNull(this.commentModel),
          function (res) {
            if (res.code === 200) {
              this.commentModel = this.createModel();
              this.loadComments();
              sa.msg(res.msg);
            }
          }.bind(this), {
            type: 'post'
          }
        );
      } catch (error) {
        sa.msg(error.message || '评论提交失败');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.board-comment {
  @include flex-column;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;

  .pub-item {
    margin-bottom: 24px;
  }

  .tree-box {
    margin-top: 16px;
  }

  &__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  &__error {
    color: #ff4d4f;
    text-align: center;
    padding: 16px;
  }

  @media (max-width: 768px) {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
  }
}

.board-comment__empty {
  display: flex;
  justify-content: center;
  text-align: center;
  color: rgb(202, 202, 202);
  font-size: larger;
  padding: 20px 0;
}

.board-comment__stats {
  margin-top: 16px;
  padding: 8px 0;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 14px;
  text-align: right;
}
</style>
